<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-26 16:24:05
 * @LastEditTime: 2019-09-27 15:36:34
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <div class="container_card">
      <div class="container_head">
        <svg-icon icon-class="list" />  添加权限
      </div>
      <div class="container_body">
        <el-form
          ref="addform"
          :model="addform"
          :rules="addRules"
          label-width="150px"
          class="demo-dynamic"
        >
          <el-form-item
            label="权限名称"
            prop="name"
          >
            <el-input
              ref="name"
              v-model="addform.name"
              placeholder="权限名称"
              name="name"
            />
          </el-form-item>
          <el-form-item label="权限类型" prop="type">
            <template>
              <el-radio-group v-model="addform.type" @change="type_channel">
                <el-radio border label="1">菜单权限</el-radio>
                <el-radio border label="2">组件权限</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
          <el-form-item
            label="路由名称"
            prop="path"
          >
            <el-input ref="path" v-model="addform.path" placeholder="路由名称" />
          </el-form-item>
          <template v-if="addform.type === '1'">
            <el-form-item label="父级菜单" prop="fid">
              <el-select v-model="addform.fid" filterable placeholder="请选择">
                <el-option v-for="item in parentList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="addform.fid !== 0" label="是否隐藏" prop="hidden">
              <el-switch
                v-model="addform.hidden"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
            <el-form-item v-if="addform.fid === 0" label="icon" prop="icon">
              <el-input
                ref="icon"
                v-model="addform.icon"
                placeholder="请填写icon名称"
                name="icon"
              />
            </el-form-item>
          </template>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button type="btn" @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    const fidValidator = (rule, value, callback) => {
      if (value === undefined) {
        callback(new Error('请选择一个父级菜单！'))
      }
      callback()
    }
    const typeValidate = (rule, value, callback) => {
      if (this.addform.type === '' || this.addform.type === undefined || this.addform.type === null) {
        callback(new Error('请至少选择一种权限类型！'))
      }
      callback()
    }
    return {
      addform: {
        hidden: true
      },
      addRules: {
        name: [{ required: true, trigger: 'blur', message: '请填写渠道名称' }],
        icon: [{ required: true, trigger: 'blur', message: '请填写icon名称' }],
        path: [{ required: true, trigger: 'blur', message: '请填写路由名称' }],
        type: [{ required: true, validator: typeValidate }],
        fid: [{ required: true, validator: fidValidator }],
        hidden: [{ required: true }]
      },
      parentList: [],
      hidden: false
    }
  },
  created() {
    this.$api.get_permission_f([]).then(res => {
      console.log(res)
      res.data.unshift({
        name: '最高级',
        id: 0
      })
      console.log(res.data)
      this.parentList = res.data
    })
    const id = this.$route.query.id
    if (id) {
      const data = {
        id: id
      }
      this.$api.get_permission_info(data).then(res => {
        console.log(res)
        res.data.type = res.data.type.toString()
        if (res.data.hidden === 1) {
          res.data.hidden = true
        }
        this.addform = res.data
      })
    }
  },
  methods: {
    submitForm() {
      this.$refs.addform.validate(valid => {
        if (valid) {
          this.$api.add_permission(this.addform).then(res => {
            this.$notify.success({
              message: '添加成功！'
            })
            this.$router.push('/permission/index')
          }).catch(() => {
            this.$notify.error({
              title: '',
              message: '网络错误'
            })
          })
        }
      })
    },
    type_channel(res) {
      console.log(res)
      this.addform.type = res
    },
    resetForm() {
      this.$refs.addform.resetFields()
      this.addform = {
        hidden: 0
      }
    }
  }
}
</script>
